<script>
const toys = [
  {id:1, color: '红色', name: '赛车', types: ['户外', '运动']},
  {id:2, color: '绿色', name: '积木',types: ['益智', '室内']},
  {id:3, color: '绿色', name: '碗', types: ['室内', '器皿']},
  {id:4, color: '红色', name: '拼图',types: ['益智', '室内']},
  {id:5, color: '蓝色', name: 'UNO纸牌',types: ['桌游', '益智', '室内']},
  {id:6, color: '白色', name: '球',types: ['户外', '运动']},
  {id:7, color: '绿色', name: '气球',types: ['室内']},
  {id:8, color: '蓝色', name: '棋子',types: ['益智', '室内', '桌游']},
  {id:9, color: '红色', name: '水枪',types: ['户外']},
  {id:10, color: '红色', name: '橡皮泥',types: ['益智', '室内']},
  {id:11, color: '白色', name: '玻璃球',types: ['游戏']},
  {id:12, color: '紫色', name: '球拍',types: ['运动', '户外']},
  {id:13, color: '黑色', name: '弹弓',types: ['户外']},
  {id:14, color: '黄色', name: '布偶',types: ['家居', '室内']},
  {id:15, color: '蓝色', name: '跳绳',types: ['运动', '户外']},
  {id:16, color: '绿色', name: '垫子',types: ['家居', '运动', '室内']},
]
// 按如下模版打印所有物品
/*
<ul>
  <li>白色：<a href='item?id=1'>赛车，类型：<span>户外</span>, <span>运动</span></li>
  ...
</ul>
*/
document.write(`<ul>
  ${toys.map(function(item) {
    return `<li>${item.color}：<a href='item?id=${
      item.id}'>${
      item.name}</a>，类型：${
        item.types.map(function(type) {
          return `<span>${type}</span>`
        }).join(', ')
      }</li>`
  }).join('\n')}
</ul>`)

// 找出所有红色物品的名字数组
console.log(
  toys.filter(function(item) {
    return item.color === '红色'
  }).map(function(item) {
    return item.name
  })
)
// 找出所有绿色并且types包含室内的物品
console.log(
  toys.filter(function(item) {
    return item.color === '绿色'
  }).filter(function(item) {
    return item.types.indexOf('室内') !== -1
  })
)
// 一共有哪些种颜色？
const colors = []
for (let i=0; i<toys.length; i++) {
  if (colors.indexOf(toys[i].color) === -1) {
    colors.push(toys[i].color)
  }
}
console.log(colors)
console.log(toys.reduce(function(colors, toy) {
  if(colors.indexOf(toy.color) === -1) {
    colors.push(toy.color)
  }
  return colors
}, []))
// 一共有哪些种类型？
console.log(toys.reduce(function(types, toy) {
  return [
    ...types,
    ...toy.types.filter(function(type) {
      return types.indexOf(type) === -1
    })
  ]
}, []))
// 整理数据后按下面的格式显示
// [{type: '户外', toys: ['篮球', '飞盘']}]
/*
  <ul>
    <li>
      户外
      <ul>
        <li>红色的赛车</li>
        <li>白色的球</li>
        <li>...</li>
      </ul>
    </li>
    <ul>
    <li>
      运动
      <ul>
        <li>红色的赛车</li>
        <li>白色的球</li>
        <li>紫色的球拍</li>
      </ul>
    </li>
    ...
  </ul>
*/
// [
  // {type: '户外', toys: [{name:'篮球', color:'xx'}, '飞盘']}
// ]
const data = toys.reduce(function(r, toy) {
  // r=[] toy.types=户外 运动
  toy.types.forEach(function(type) {
    const item = r.find(function(item) {
      // 汇总数据里是否包含该类型的item
      return item.type === type
    })
    if (item){ // 包含
      item.toys.push(`${toy.color}的${toy.name}`)
    } else { // 不包含
      r.push({type: type, toys: [`${toy.color}的${toy.name}`]})
    }
  })
  return r
}, [])

document.write(`<ul>
  ${data.map(function(item) {
    return `<li>${item.type}<ul>${
      item.toys.map(function(text) {
        return `<li>${text}</li>`
      }).join('')
    }</ul></li>`
  }).join('')}
</ul>`)
</script>

